import { Tabs } from "antd-mobile";
import useHome from "./hooks";
import HomeList from "./HomeList";
import "./style.css";
import { useEffect, useState } from "react";

const Home = () => {
  const { channels } = useHome();
  const [activeTab, setActiveTab] = useState("0");
  useEffect(() => {
    setActiveTab([channels[0]?.id].toString())
  }, []);
  return (
    <div className="tabContainer">
      <Tabs defaultActiveKey={activeTab}>
        {channels.map((item) => (
          <Tabs.Tab title={item.name} key={item.id}>
            <div className="listContainer">
              <HomeList channelId={''+item.id} />
            </div>
          </Tabs.Tab>
        ))}
      </Tabs>
    </div>
  );
};

export default Home;
